<script setup>
import dayjs from 'dayjs'
import { onMounted, ref } from 'vue'
import { systemApi } from '@/api'

const form = ref({
  userName: '',
  type: ''
})
const list = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
async function search() {
  const { data } = await systemApi.default.getRoleList({
    roleName: '',
    pageNo: 1,
    pageSize: 9999
  })
  list.value = data?.list ?? []
  total.value = data?.total ?? 0
}
onMounted(() => {
  search()
})

const searchActions = [{ label: '查询', type: 'primary', click: search }]

const columns = [
  {
    prop: 'userName',
    label: '操作账号'
  },
  {
    prop: 'model',
    label: '模块'
  },
  {
    prop: 'description',
    label: '操作描述',
    'show-overflow-tooltip': true
  },
  {
    prop: 'type',
    label: '操作类型'
  },
  {
    prop: 'params',
    label: '操作参数',
    'show-overflow-tooltip': true
  },
  {
    prop: 'ip',
    label: '操作IP'
  },
  {
    prop: 'operationTime',
    label: '操作时间',
    formatter: row => dayjs(row.operationTime).format('YYYY-MM-DD HH:mm:ss')
  }
]
</script>

<template>
  <DeSearch title="日志管理" :actions="searchActions">
    <el-form
      :model="form"
      label-width="90px"
      label-position="left"
      label-suffix="："
    >
      <el-row :gutter="20">
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="操作账号" prop="userName">
            <el-input v-model.trim="form.userName" clearable />
          </el-form-item>
        </el-col>
        <el-col :lg="6" :md="8" :sm="12">
          <el-form-item label="操作类型" prop="type">
            <el-input v-model.trim="form.type" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </DeSearch>

  <DeTable
    :data="list"
    :columns="columns"
    @onRefresh="search"
    v-model:pageSize="pageSize"
    v-model:currentPage="currentPage"
    :total="total"
  />
</template>
